<!DOCTYPE HTML>
<html lang="zh-CN">


<head>
    <meta charset="utf-8">
    <meta name="keywords" content="html5+css3+es6+canvas, Sen-Bolg">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit|ie-stand|ie-comp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- Global site tag (gtag.js) - Google Analytics -->


    <title>html5+css3+es6+canvas | Sen-Bolg</title>
    <link rel="icon" type="image/png" href="/blog/favicon.png">

    <link rel="stylesheet" type="text/css" href="/blog/libs/awesome/css/all.css">
    <link rel="stylesheet" type="text/css" href="/blog/libs/materialize/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="/blog/libs/aos/aos.css">
    <link rel="stylesheet" type="text/css" href="/blog/libs/animate/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/blog/libs/lightGallery/css/lightgallery.min.css">
    <link rel="stylesheet" type="text/css" href="/blog/css/matery.css">
    <link rel="stylesheet" type="text/css" href="/blog/css/my.css">

    <script src="/blog/libs/jquery/jquery.min.js"></script>

<meta name="generator" content="Hexo 5.4.0">
<style>.github-emoji { position: relative; display: inline-block; width: 1.2em; min-height: 1.2em; overflow: hidden; vertical-align: top; color: transparent; }  .github-emoji > span { position: relative; z-index: 10; }  .github-emoji img, .github-emoji .fancybox { margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important; text-decoration: none !important; user-select: none !important; cursor: auto !important; }  .github-emoji img { height: 1.2em !important; width: 1.2em !important; position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; user-select: none !important; cursor: auto !important; } .github-emoji-fallback { color: inherit; } .github-emoji-fallback img { opacity: 0 !important; }</style>
<link rel="alternate" href="/blog/atom.xml" title="Sen-Bolg" type="application/atom+xml">
</head>



   <style>
    body{
       background-image: url(https://cdn.jsdelivr.net/gh/Tokisaki-Galaxy/res/site/medias/background.jpg);
       background-repeat:no-repeat;
       background-size:cover;
       background-attachment:fixed;
    }
</style>



<body>
    <header class="navbar-fixed">
    <nav id="headNav" class="bg-color nav-transparent">
        <div id="navContainer" class="nav-wrapper container">
            <div class="brand-logo">
                <a href="/blog/" class="waves-effect waves-light">
                    
                    <img src="/blog/medias/logo.png" class="logo-img" alt="LOGO">
                    
                    <span class="logo-span">Sen-Bolg</span>
                </a>
            </div>
            

<a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fas fa-bars"></i></a>
<ul class="right nav-menu">
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/blog/" class="waves-effect waves-light">
      
      <i class="fas fa-home" style="zoom: 0.6;"></i>
      
      <span>首页</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/blog/tags" class="waves-effect waves-light">
      
      <i class="fas fa-tags" style="zoom: 0.6;"></i>
      
      <span>标签</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/blog/categories" class="waves-effect waves-light">
      
      <i class="fas fa-bookmark" style="zoom: 0.6;"></i>
      
      <span>分类</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/blog/archives" class="waves-effect waves-light">
      
      <i class="fas fa-archive" style="zoom: 0.6;"></i>
      
      <span>归档</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/blog/about" class="waves-effect waves-light">
      
      <i class="fas fa-user-circle" style="zoom: 0.6;"></i>
      
      <span>关于</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/blog/contact" class="waves-effect waves-light">
      
      <i class="fas fa-comments" style="zoom: 0.6;"></i>
      
      <span>留言板</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/blog/friends" class="waves-effect waves-light">
      
      <i class="fas fa-address-book" style="zoom: 0.6;"></i>
      
      <span>友情链接</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="" class="waves-effect waves-light">

      
      <i class="fas fa-list" style="zoom: 0.6;"></i>
      
      <span>Medias</span>
      <i class="fas fa-chevron-down" aria-hidden="true" style="zoom: 0.6;"></i>
    </a>
    <ul class="sub-nav menus_item_child ">
      
      <li>
        <a href="/blog/music">
          
          <i class="fas fa-music" style="margin-top: -20px; zoom: 0.6;"></i>
          
          <span>Music</span>
        </a>
      </li>
      
      <li>
        <a href="/blog/movies">
          
          <i class="fas fa-film" style="margin-top: -20px; zoom: 0.6;"></i>
          
          <span>Movies</span>
        </a>
      </li>
      
      <li>
        <a href="/blog/books">
          
          <i class="fas fa-book" style="margin-top: -20px; zoom: 0.6;"></i>
          
          <span>Books</span>
        </a>
      </li>
      
      <li>
        <a href="/blog/galleries">
          
          <i class="fas fa-image" style="margin-top: -20px; zoom: 0.6;"></i>
          
          <span>Galleries</span>
        </a>
      </li>
      
    </ul>
    
  </li>
  
  <li>
    <a href="#searchModal" class="modal-trigger waves-effect waves-light">
      <i id="searchIcon" class="fas fa-search" title="搜索" style="zoom: 0.85;"></i>
    </a>
  </li>
</ul>


<div id="mobile-nav" class="side-nav sidenav">

    <div class="mobile-head bg-color">
        
        <img src="/blog/medias/logo.png" class="logo-img circle responsive-img">
        
        <div class="logo-name">Sen-Bolg</div>
        <div class="logo-desc">
            
            Never really desperate, only the lost of the soul.
            
        </div>
    </div>

    

    <ul class="menu-list mobile-menu-list">
        
        <li class="m-nav-item">
	  
		<a href="/blog/" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-home"></i>
			
			首页
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/blog/tags" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-tags"></i>
			
			标签
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/blog/categories" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-bookmark"></i>
			
			分类
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/blog/archives" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-archive"></i>
			
			归档
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/blog/about" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-user-circle"></i>
			
			关于
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/blog/contact" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-comments"></i>
			
			留言板
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/blog/friends" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-address-book"></i>
			
			友情链接
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="javascript:;">
			
				<i class="fa-fw fas fa-list"></i>
			
			Medias
			<span class="m-icon"><i class="fas fa-chevron-right"></i></span>
		</a>
            <ul  style="background:  ;" >
              
                <li>

                  <a href="/blog/music " style="margin-left:75px">
				  
				   <i class="fa fas fa-music" style="position: absolute;left:50px" ></i>
			      
		          <span>Music</span>
                  </a>
                </li>
              
                <li>

                  <a href="/blog/movies " style="margin-left:75px">
				  
				   <i class="fa fas fa-film" style="position: absolute;left:50px" ></i>
			      
		          <span>Movies</span>
                  </a>
                </li>
              
                <li>

                  <a href="/blog/books " style="margin-left:75px">
				  
				   <i class="fa fas fa-book" style="position: absolute;left:50px" ></i>
			      
		          <span>Books</span>
                  </a>
                </li>
              
                <li>

                  <a href="/blog/galleries " style="margin-left:75px">
				  
				   <i class="fa fas fa-image" style="position: absolute;left:50px" ></i>
			      
		          <span>Galleries</span>
                  </a>
                </li>
              
            </ul>
          
        </li>
        
        
        <li><div class="divider"></div></li>
        <li>
            <a href="https://gitee.com/sen-project/blog" class="waves-effect waves-light" target="_blank">
                <i class="fab fa-github-square fa-fw"></i>Fork Me
            </a>
        </li>
        
    </ul>
</div>


        </div>

        
            <style>
    .nav-transparent .github-corner {
        display: none !important;
    }

    .github-corner {
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;
        border: 0;
        transform: scale(1.1);
    }

    .github-corner svg {
        color: #0f9d58;
        fill: #fff;
        height: 64px;
        width: 64px;
    }

    .github-corner:hover .octo-arm {
        animation: a 0.56s ease-in-out;
    }

    .github-corner .octo-arm {
        animation: none;
    }

    @keyframes a {
        0%,
        to {
            transform: rotate(0);
        }
        20%,
        60% {
            transform: rotate(-25deg);
        }
        40%,
        80% {
            transform: rotate(10deg);
        }
    }
</style>

<a href="https://gitee.com/sen-project/blog" class="github-corner tooltipped hide-on-med-and-down" target="_blank"
   data-tooltip="Fork Me" data-position="left" data-delay="50">
    <svg viewBox="0 0 250 250" aria-hidden="true">
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
        <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
              fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
              fill="currentColor" class="octo-body"></path>
    </svg>
</a>
        
    </nav>

</header>

    
<script src="/blog/libs/cryptojs/crypto-js.min.js"></script>
<script>
    (function() {
        let pwd = '';
        if (pwd && pwd.length > 0) {
            if (pwd !== CryptoJS.SHA256(prompt('请输入访问本文章的密码')).toString(CryptoJS.enc.Hex)) {
                alert('密码错误，将返回主页！');
                location.href = '/blog/';
            }
        }
    })();
</script>




<div class="bg-cover pd-header post-cover" style="background-image: url('http://r0juxgf4m.hb-bkt.clouddn.com/yazhi.png')">
    <div class="container" style="right: 0px;left: 0px;">
        <div class="row">
            <div class="col s12 m12 l12">
                <div class="brand">
                    <h1 class="description center-align post-title">html5+css3+es6+canvas</h1>
                </div>
            </div>
        </div>
    </div>
</div>




<main class="container content">

    
    <!-- 文章内容详情 -->
<div id="artDetail">
    <div class="card">
        <div class="card-content article-info">
            <div class="row tag-cate">
                <div class="col s7">
                    
                    <div class="article-tag">
                        
                            <a href="/blog/tags/HTML/">
                                <span class="chip bg-color">HTML</span>
                            </a>
                        
                            <a href="/blog/tags/CSS/">
                                <span class="chip bg-color">CSS</span>
                            </a>
                        
                            <a href="/blog/tags/ES6/">
                                <span class="chip bg-color">ES6</span>
                            </a>
                        
                    </div>
                    
                </div>
                <div class="col s5 right-align">
                    
                    <div class="post-cate">
                        <i class="fas fa-bookmark fa-fw icon-category"></i>
                        
                            <a href="/blog/categories/Markdown/" class="post-category">
                                Markdown
                            </a>
                        
                    </div>
                    
                </div>
            </div>

            <div class="post-info">
                
                <div class="post-date info-break-policy">
                    <i class="far fa-calendar-minus fa-fw"></i>发布日期:&nbsp;&nbsp;
                    2021-10-14
                </div>
                

                
                <div class="post-date info-break-policy">
                    <i class="far fa-calendar-check fa-fw"></i>更新日期:&nbsp;&nbsp;
                    2021-10-15
                </div>
                

                
                <div class="info-break-policy">
                    <i class="far fa-file-word fa-fw"></i>文章字数:&nbsp;&nbsp;
                    7.7k
                </div>
                

                
                <div class="info-break-policy">
                    <i class="far fa-clock fa-fw"></i>阅读时长:&nbsp;&nbsp;
                    30 分
                </div>
                

                
                    <div id="busuanzi_container_page_pv" class="info-break-policy">
                        <i class="far fa-eye fa-fw"></i>阅读次数:&nbsp;&nbsp;
                        <span id="busuanzi_value_page_pv"></span>
                    </div>
				
            </div>
        </div>
        <hr class="clearfix">

        
        <!-- 是否加载使用自带的 prismjs. -->
        <link rel="stylesheet" href="/blog/libs/prism/prism.css">
        

        

        <div class="card-content article-card-content">
            <div id="articleContent">
                <h2 id="CSS-HTML-ES6额外特性，对低版本兼容有待考察"><a href="#CSS-HTML-ES6额外特性，对低版本兼容有待考察" class="headerlink" title="CSS,HTML,ES6额外特性，对低版本兼容有待考察"></a>CSS,HTML,ES6额外特性，对低版本兼容有待考察</h2><h2 id="CANVAS绘图"><a href="#CANVAS绘图" class="headerlink" title="CANVAS绘图"></a>CANVAS绘图</h2><pre class="line-numbers language-none"><code class="language-none">
1.h5(html5+css3+es6)
2.caniuse   /https://caniuse.com/ （此网站可方便查询兼容度，且有较好解决方案）
3.html5新出标签
	(1)header 有语义 无样式
		用来制作页面的头部信息
	(2)nav 有语义 无样式
		用于制作页面中的导航
	(3)article 有语义 无样式
		用于制作文章内容
	(4)section 有语义 无样式
		定义文档中的节（section、区段）
	(5)aside 有语义 无样式
		定义侧边栏
	(6)footer 有语义 无样式
		定义页脚
	(7)&lt;hgroup&gt; 有语义 无样式
		定义网页标题元素（h1-h6）的组合
		比如一个文章中有主副标题
	(8)&lt;figure&gt;
			定义媒介内容的分组，以及它们的标题
	   &lt;figcaption&gt; 定义 figure元素的标题
			应放在figure的第一个或者最后一个

	新标签的意义：新标签带来的是网页布局的改变及提升对搜索引擎的友好
	(9)time 时间日期标签
	(10)mark 有语义  有样式  
		具有标记的文本
	(11)progress

4.form新出的表单控件
	(1)email 邮箱控件， 在表单提交时会判断是否为email格式
	(2)url 地址控件，在表单提交时会判断是否为url格式
	(3)date: 年-月-日格式的控件
	(4)time: 时:分格式的控件
	(5)datetime-local: 年-月-日 时:分 格式的控件（本地时间）
	(6)month: 年-月格式的控件
	(7)week: 年-周数格式的控件
	(8)number: 数字输入框
	(9)range: 选择区域
	(10)tel: 电话输入框
	(11)search: 用于搜索    results图标 *
	(12)color: 调用系统选色器

	表单的新属性：
		placeholder: 占位符，输入框提示信息 *
		required: 该input为必填项 *
		autofocus: 在页面加载时，域自动地获得焦点 *
		pattern: 正则验证  如:  pattern="[0-9]{7,12}"
		minlength/maxlength: input能输入的最小/最大字节的长度

5.多媒体标签
	(1)&lt;object&gt;&lt;/object&gt; 此标签是h4的标签
		data 资源地址
		height 高度
		width 宽度
		type 定义 data 属性中规定的数据的 MIME 类型。
		至少必须定义 "data" 和 "type" 属性之一。

		mime类型是什么？简单来讲，它的作用就是告诉浏览器你这个内容到底是个什么东东，是一张网页？还是一张图片？还是一个视频？浏览器只有知道了你这是个什么东西，才能正确处理它，mime就是这个东西，服务器通过Content-Type这个header来指定mime。


		如果未显示 object 元素，就会执行位于 &lt;object&gt; 和 &lt;/object&gt; 之间的代码。通过这种方式，我们能够嵌套多个 object 元素（每个对应一个浏览器）
	
	(2)&lt;embed&gt;&lt;/embed&gt;
		src 资源地址
		height 高度
		width 宽度
		type 定义 data 属性中规定的数据的 MIME 类型。
	
	总结：以上两个标签播放视频是需要借助flash插件，如果你的设备不支持flash，那么你就要考虑使用其他方式了;
	以上两个标签基本支持所有的多媒体类型文件，但是不要使用以上两个标签引入图片;
	
	(3)&lt;video&gt;&lt;/video&gt; h5新出的视频标签
		属性：
		width  height
		设置媒体元素的大小，单位为像素；
		省略该属性，则使用播放源文件的大小；
		仅设置宽度值，将根据播放源文件的长宽比例自动生成一个与之对应的高度值。
		src 资源地址
	
		1&gt;video标签只支持3种格式的视频文件 ： MP4 webM ogg
		而且不同浏览器对于视频的支持还是不同的，大家可以参照图片
	
		如何解决不同浏览器的支持问题呢？
		&lt;source&gt;&lt;/source&gt;
		&lt;video&gt;
			&lt;source src='1.mp4'&gt;&lt;/source&gt;
			&lt;source src='1.webm'&gt;&lt;/source&gt;
			&lt;source src='1.ogg'&gt;&lt;/source&gt;
			&lt;span&gt;对不起,您当前浏览器不支持此视频&lt;/span&gt;
		&lt;/video&gt;
	
		2&gt;.loop 是否循环播放
		3&gt;.muted 是否静音
		4&gt;.poster 可以引入封面
	
		js常用属性和方法
		属性：
		5&gt;duration 获取视频时长
			注意：要在window.onload事件中去获取视频时长
		6&gt;currentTime 获取实时播放事件
		7&gt;paused 返回视频暂停状态， 如果暂停返回true
		方法：
		8&gt;load() 重新加载视频
		9&gt;pause() 暂停视频
		10&gt; play() 播放视频
		事件：
		error--------------请求数据时遇到错误时触发
		play---------------开始播放时触发
		pause-------------暂停时触发
		timeupdate-------播放时间改变时触发
		ended-------------播放结束时触发
		volumechange----音量改变时触发
	
		注意：使用 addEventListener监听事件
	
	(4)&lt;audio&gt;&lt;/audio&gt;

6.canvas画图
	(1)可以给canvas标签设置大小：
		设置方式有两种：
			1&gt;通过css的width和height属性设置大小，但是这样设置画出来的图形会变形，所以不推荐
			2&gt;通过直接在canvas标签上写width 和 height属性设置大小

	(2)每个canvas都必须要有一个context（上下文）的定义
		var canvas = document.getElementById('myCanvas');
		var ctx = canvas.getContext('2d');


		// 开始画图
		ctx.beginPath();
		// 1.确定起点
		ctx.moveTo(50,50);	// 起点确定一次
		ctx.lineTo(100,100);	// 终点可以画多次
		ctx.lineTo(30,150);
		ctx.closePath(); // 最终点与起点相连
		
		ctx.fillStyle='#0000ff';	// 确定填充颜色
		ctx.fill();	// 填充
	
		ctx.lineWidth=4; // 确定线段的宽度(不需要单位)
		ctx.strokeStyle='#ff0000'
		ctx.stroke();	// 使用stroke方法把所有点连接起来，最终连接一次即可
	
	(3)快速绘制矩形的方法
		ctx.rect(startX,startY,width,height);
		快速的绘制一个矩形，你需要自己去描线或者填充颜色
		
		ctx.fillRect(startX,startY,width,height);
		快速的绘制一个矩形，并且填充了颜色; 此方法绘制的图形不能被描线
	
		ctx.strokeRect(startX,startY,width,height);
		快速的绘制一个矩形，并且描线; 此方法绘制的图形不能被填充
	
	(4)快速绘制圆形
		arc(oX,oY,r,开始角度,结束角度,false/true)
	
		oX,oY 确定圆心
		r 确定半径
		false	顺时针画图   true  逆时针画图
	
		角度计算公式：
		2*Math.PI/360*你想画的角度
	
	(5)贝塞尔曲线
		1&gt;二次贝塞尔曲线
			// 起点需要自行定义
			ctx.moveTo()
			ctx.quadraticCurveTo(controlX,controlY,endX,endY)
	
		2&gt;三次贝塞尔曲线
			// 起点需要自行定义
			ctx.moveTo()
			bezierCurveTo(cx1,cy1,cx2,cy2,ex,ey)
	
	(6)绘制文字
		fillText(text,x,y[,maxWidth])	// 填充绘制文字
		maxWidth可选参数，规定文字的最大宽度
	
		strokeText(text,x,y[,maxWidth])	// 描边绘制文字
		maxWidth可选参数，规定文字的最大宽度
	
		设置文字属性：
		ctx.font='bold 60px 楷体';
	
		ctx.textAlign='left|right' // 设置文字的对齐方向
	
	(7)图形组合方式
		// 获取canvas标签对象
		var canvas = document.getElementById('myCanvas')
		// “填充画布”
		var ctx = canvas.getContext('2d');
		// 第一张图
	
		ctx.globalCompositeOperation='type'; // type是一种组合类型
	
		// 第二张图
	
		type都有哪些值呢？
		1&gt;source-over：默认值，表示新图覆盖在旧图之上
		2&gt;source-atop：只绘制旧图和重叠的部分，其他透明
		3&gt;source-in：只绘制新图的重叠部分，其他透明
		如果新图有边框，要考虑到重叠部分是否闭合的情况
	
		4&gt;source-out：只绘制新图，重叠部分和旧图透明
		5&gt;destination-over：表示旧图覆盖在新图之上
		6&gt;destination-atop：只绘制新图和重叠的部分，其他透明
		7&gt;destination-in：只绘制旧图的重叠部分，其他透明
		8&gt;destination-out：只绘制旧图，重叠部分和新图透明
		9&gt;lighter：旧图与新图都绘制，重叠部分混色处理
		10&gt;xor：旧图和新图重叠处做透明处理
		11&gt;copy：只绘制新图形，不绘制旧图形


	(8)图形阴影
		shadowColor：设置阴影颜色
		shadowBlur：设置阴影模糊级别
		shadowOffsetX：设置阴影在x轴上距离图形的距离
		shadowOffsetY：设置阴影在y轴上距离图形的距离
	
		注意：先制作阴影，最后在去描边或填充
	
	(9)填充图像到画布
		参数1：
		drawImage(img,x,y);
		填充图像到画布(不改变原图大小)
		参数2：
		drawImage(img,x,y,w,h);
		填充图像到画布(改变原图大小)
		参数3：
		drawImage(img,x,y,w,h,rx,ry,rw,rh);
		x y: 原图坐标
		w h: 要裁剪的宽高
		rx ry: 要在画布上放置的位置
		rw rh: 显示的大小
	
	(10)平铺
		var img = new Image();
		img.src='img/feiji.png';
		img.onload=function(){
			var pat = ctx.createPattern(img,'repeat');
			ctx.fillStyle=pat;
			ctx.rect(50,50,400,300);
			ctx.fill();
		}
	
		repeat整个画布平铺
	    repeat-x/y在x/y轴方向上平铺
	    no-repeat不平铺
	(11)画布裁剪
		图像的裁剪：clip()
		配合路径使用，先绘制好路径，
	 	然后调用clip方法
	
	 	提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）
	
	 	
	(12)scale(宽度放大比例,高度放大比例)
		画布本身大小不会发生改不变，但是画布中的物理像素会对应改变;
	
	(13)rotate(角度)
		以画布的左上角(0,0)为圆心进行旋转,顺时针方向
		其实是坐标系旋转
	
		ctx.rotate(30*Math.PI/180);
		ctx.rect(300,50,100,100);
		ctx.stroke();
	
	(14)translate(x,y)改变画布的圆心
		ctx.translate(100,100);
		ctx.rect(100,50,100,100);
		// 现在的100,50是相对于translate之后的圆心进行的偏移
		ctx.stroke();
	
	(15)状态存取
		scale/roate/translate会改变画布的状态，所以配合save()和restore()方法可以完成复杂的图形布局;
		save() 保存当前画布状态
		restore() 返回上一次save()时刻的状态
	
	(16)清除画布(橡皮擦)
		ctx.clearRect(x,y,w,h);

7.本地存储
	(1)cookie与本地存储
		cookie：
		只能存储4KB
		浪费带宽，每次会随着HTTP请求发送给服务器
		操作数据很繁琐，没有方便的API
		本地存储：
		大小最小5MB，可以申请更大的空间
		不会随HTTP请求发送给服务器
		非常容易操作
		移动端普及高
		localStorage与sessionStorage两种

		local的特点：
			localStorage为永久性保存数据，不会随着浏览器的关闭而消失，可以在同域名跨页访问。
			按域名进行存储，不会和其他域名冲突
			键值对存储：key/value


	(2)操作	1&gt;存数据		localStorage.setItem('键名','键值');	2&gt;取数据		localStorage.getItem('键名');	3&gt;改数据		localStorage.setItem('键名','键值');		改数据就是存数据，只是键名一样	4&gt;清数据		全部清除		localStorage.clear();		清除某个		localStorage.removeItem('键名');	5&gt;获取对应位置的键名		localStorage.key(索引值);	6&gt;获取当前域名下数据的长度		localStorage.length(3)json	json对象：属性带有双引号的对象	{"name":'张三',"age":18}	json字符串：带着引号的json格式数据	'{"name":"张三","age":18}'


		json对象与json字符串互相转换：	var json1 = '{"name":"张三","age":18}';	var r = JSON.parse(json1);	console.log(r);	var json2 = {name:"张三",age:18};	// 普通对象	var json2 = {"name":"张三","age":18};	// json对象	var s = JSON.stringify(json2);	console.log(s);(4)sessionStoragesessionStorage为临时性保存数据，当页面关闭就会消失。其他一切与localStorage一样sessionStorage不能跨页面访问，也不会触发跨标签页的storage事件。它只局限在当前的标签页

8.新的选择器
	1、document.querySelector("selector");
	选择器返回第一个匹配到的元素，如未匹配到返回null
	注意：不管你的选择器能选择到多个还是一个，最终的结果就是一个；
	2、document.querySelectorAll("selector");
	选择器返回所有匹配到的元素数组，如未匹配到返回空数组<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<pre><code>var res = document.querySelectorAll('li:nth-child(2)');
console.log(res);
// 选择器部分支持css里边的各种选择器写法
</code></pre>
<h2 id="CSS新特性"><a href="#CSS新特性" class="headerlink" title="CSS新特性"></a>CSS新特性</h2><p>1.选择器<br>    (1) e~p 表示选择e后边的所有同级p<br>    (2) e:enabled 选择表单中所有的可用控件<br>    (3) e:disabled 选择表单中所有的不可用控件<br>    (4) e:checked 选择表单中被选中的单选或者复选<br>    (5) e::selection 匹配选中的文本的内容 注意：必须使用两个冒号<br>        支持两个属性:color  background<br>    (6):root 匹配html标签<br>    (7)E:nth-child(n)  匹配同一父元素下的第几个E元素<br>        n是从1开始计数的<br>        E:nth-child(2n/2n+1/3n/3n+1)<br>    (8)E:nth-last-child(n)  匹配同一父元素下的第几个E元素,倒数<br>        n是从1开始计数的<br>    (9)E:last-child  匹配同一父元素下最后一个<br>        如果E不是最后一个元素，则匹配不上</p>
<pre><code>(10)E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
(11)E:nth-last-of-type(n)    与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
(12)E:first-of-type    匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
(13)E:last-of-type    匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
(14)e:only-child 匹配父元素下仅有的一个子元素(找独生子)
(15)e:only-of-type 匹配父元素下使用同种标签的唯一一个子元素
(16)E:empty    匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素
注意：换行也算作一个内容
(17)E:not(s)    匹配不符合当前选择器的任何元素
</code></pre>
<p>2.圆角边框<br>    (1)border-radius: 上 右 下  左;<br>        解释：可以向padding或者margin一样去使用border-radius</p>
<pre><code>(2)border-radius: 上 右 下  左 / 上 右 下  左
                    水平方向         垂直方向
</code></pre>
<p>3.图像边框<br>    简写：<br>    border-image：border-image-source || border-image-slice [ / border-image-width? [ / border-image-outset ]? ]? || border-image-repeat </p>
<pre><code>// 拆分写法

border-image-source: url();  // 引入图片资源

border-image-slice:百分比 &amp;&amp; fill; // 百分比是以图片为基准
// 此属性可以写4个值，分别代表上右下左
如果写了fill ，表示九宫格中间的部分填充盒子的内容区域

border-image-outset:0; // 默认值是0, 此属性代码边框向四周扩展的距离，以边框的宽度为准

border-image-repeat:stretch|repeat|round;
默认值:stretch
repeat:重复，但是可能会出现一半的情况
round:重复，但是不会出现一半图片的情况
</code></pre>
<p>4.文本阴影<br>    text-shadow:水平偏移量 垂直偏移量 阴影模糊值 颜色(rgba)，<br>    水平偏移量 垂直偏移量 阴影模糊值 颜色(rgba)，<br>    水平偏移量 垂直偏移量 阴影模糊值 颜色(rgba);</p>
<pre><code>水平偏移量：设置正直向右偏移，设置负值向左偏移
垂直偏移量：设置正直向下偏移，设置负值向上偏移
阴影模糊值：不可以设置负值
</code></pre>
<p>5.盒子阴影<br>    box-shadow:水平偏移量 垂直偏移量 阴影模糊值 [阴影外延值] 颜色(rgba)，<br>    水平偏移量 垂直偏移量 阴影模糊值 [阴影外延值] 颜色(rgba)，<br>    水平偏移量 垂直偏移量 阴影模糊值 [阴影外延值] 颜色(rgba);</p>
<p>6.背景<br>    (1)背景切割<br>        background-clip:<br>        border-box:默认裁剪方式(边框所占据空间不会裁剪图片)<br>        padding-box: 边框所占据空间裁剪图片<br>        content-box: 内边距裁剪图片</p>
<pre><code>(2)背景的原点：
    background-orign:
    border-box: 背景图从边框的最外侧开始显示
    padding-box:背景图从边框的最内侧开始显示
    content-box:背景图从内容区域开始显(如果你有padding,不会从padding部分显示)

(3)背景图尺寸
    background-size:
    lengthX lengthY： 长度值指定
    如果写一个值，在不改变图形比例的情况下按照你写的值等比例放大
    percentageX percentageY： 百分比指定
    如果写一个值，在不改变图形比例的情况下宽度按照你写的百分比等比例变大
    auto： 真实大小(默认值)
    cover：等比缩放到完全覆盖容器
    contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内

(4)背景图使用的小技巧
    做一个永远居中的背景图出现
    background-size: cover;
    background-position: center center;
</code></pre>
<p>7.背景色渐变<br>    (1)线性渐变<br>        1&gt;<br>        background:-webkit-linear-gradient(方向,颜色1,颜色2,颜色3…);<br>        background:-moz-linear-gradient(方向,颜色1,颜色2,颜色3…);<br>        background:-o-linear-gradient(方向,颜色1,颜色2,颜色3…);<br>        background:linear-gradient(方向,颜色1,颜色2,颜色3…);</p>
<pre><code>    方向：
        1&gt;可以写八个方向  例： left top
        2&gt;也可以写角度,当使用角度时，不需要添加前缀
            0deg表示垂直向上方向
            45deg顺时针旋转45deg

    2&gt;颜色过渡节点
        background:linear-gradient(angle|diretion,yellow px|%,red px|%,....)

    3&gt;透明渐变色
        background: linear-gradient(90deg,rgba(255,0,0,0) 20%,rgba(255,0,0,1) 50%,rgba(0,255,0,.7) 90%);

    4&gt;重复背景渐变
        background:repeating-linear-gradient(方向,color1 length|percenttage,color2 length|percentage,...)

(2)径向渐变(从兼容度出发,咱们考虑无前缀版本)
    1&gt;
    background:radial-gradient(position,start-color1 [px|%],....,last-color );

    兼容：加前缀即可
        -webkit-radial-gradient
        -moz-radial-gradient
        -o-radial-gradient
        radial-gradient

    在不加前缀的情况下：position表示渐变半径
    值：
        1&gt;写具体像素值 可以写1个值也可以写2个值
        2&gt;写百分比  必须写2个值
    2&gt;重复径向渐变
        background:repeating-radial-gradient(position,start-color1 [px|%],....,last-color );
</code></pre>
<p>8.蒙版<br>    -webkit-mask-image:url | gradient /<em>可以使用图片或渐变作为遮罩层</em>/<br>    -webkit-mask-repeat:repeat | repeat-x | repeat-y | no-repeat<br>    -webkit-mask-position:x y;</p>
<pre><code>-webkit-mask-clip:border-box | padding-box | content-box
-webkit-mask-origin:border-box | padding-box | content-box
-webkit-mask-size:
</code></pre>
<p>9.倒影<br>    -webkit-box-reflect:倒影方向 倒影与实体的距离 [渐变];<br>    倒影方式： above below leftright</p>
<pre><code>正确理解渐变：把渐变看成蒙版
</code></pre>
<p>10.变形(2D)<br>    transform:变形种类;<br>    transform-origin:x y; 确定变形的原点<br>    你可以写具体像素值，可以写百分比，可以写关键词</p>
<pre><code>如果想多个属性同时生效， 使用内联写法；(就是一个transform中写多个变形种类;如果分开写是不会同时生效的;多个种类之间用空格分隔)


(1)roate(角度)  
    旋转方向：顺时针
    默认情况下盒子的旋转中心为：盒子的中心
    延z轴方向旋转
    roateX()  正值为顺时针旋转
    roateY();
(2)translate(x[,y])
    如果只写一个值，表示x轴方向移动
    写两个值，表示x轴和y轴方向移动

    移动跟圆心点没有关系
    此移动相当于把"面"进行移动，他的"底座"不会移动(相对定位)

    注意：rotate会改变x轴和y轴的角度，所以旋转之后再在去做其他变形的时候要考虑x轴和y的角度

    translateX() x轴方向偏移
    translateY() y轴方向偏移

(3)scale(x [,y])  缩放 值：以倍数形式出现 1为当前大小
    定义缩放(缩小，放大)
    如果只写一个值：表示x轴方向和y轴方向同时缩放多少比例
    此属性会受到原点的影响

    scaleX X轴方向缩放
    scaleY Y轴方向缩放

    缩放会影响盒子的内容

(4)skew(x[,y])
    如果只写一个X值，就是x轴方向的扭曲

    理解：那个方向发生扭曲，对应方向进行扭曲

    skewX(angle)： 指定对象X轴的（水平方向）扭曲 
</code></pre>
<p>逆时针方向变化<br>        skewY(angle)： 指定对象Y轴的（垂直方向）扭曲<br>顺时针方向变化</p>
<pre><code>(5)当使用多个变形时，变形的顺序不同，最终会结果
</code></pre>
<p>10.变形(3D)<br>    (1)<br>    transform-style:flat | preserve-3d<br>    flat:默认值，2d空间显示<br>    preserve-3d : 3d空间显示<br>    transform–style属性指定嵌套元素(子元素)是怎样在三维空间中呈现。<br>    注意： 使用此属性必须先使用 transform 属性.</p>
<pre><code>(2)perspective：none | number
perspective（透视值）属性定义了3D立体视图的可视效果。可以把该值看做是查看该对象时的距离。当距离越近，所查看对象的视角就越变形。
注意：此属性值影响其子元素
</code></pre>
<p>11.分栏<br>    column-count:栏数;<br>    column-gap:栏间距;<br>    column-rule: column-rule-width column-rule-style column-rule-color;<br>    线的样式：<br>        column-rule-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset</p>
<pre><code>    （无边框(默认)|隐藏边框|点线|虚线|实线边框|双线边框|3D凹槽|3D凸槽|3D凹边|3D凸边）

column-span:all/none;是否跨栏  次属性设置在你文章标题上
</code></pre>
<p>12.弹性布局<br>    注意：从第一个属性到第六个属性，全部是设置在父盒子上的；<br>    (1)display : flex;      将一个元素的子元素以弹性布局进行布局<br>    (2)确定主轴<br>        flex-direction:row(默认值) | row-reverse | column | column-reverse;<br>    (3)主轴方向是否要被换行<br>        flex-wrap:no-wrap(默认值不换行) | wrap | wrap-reverse<br>        如果设置不换行，那么在主轴方向盒子会被压缩</p>
<pre><code>    当换行后两行之间的间距变大，原因是：
    当元素不只一行意味着flex容器在交叉轴上有多行，此时align-content属性生效，align-content默认属性为stretch导致flex容器将交叉轴上的多余空间按行数平均分给每行。
(4)主轴方向的对齐方式
    justify-content:
        flex-start:主轴的开始方向进行布局(默认值)
        flex-end:主轴的结束方向开始布局
        center:主轴居中对齐
        space-between:第一个flex项和最后一个flex项订到两边，中间flex项平分剩余控件
        space-around:主轴方向的剩余空间平均分布到每个flex项两侧

        space-evenly:主轴方向所有flex项占据空间相等
        注：该属性以前很少看到，原因是以前浏览器不支持，chrome 也是 60 版本之后才支持。延伸一下，align-content: space-evenly 也是这个逻辑

(5)交叉轴方向的对齐方式
    align-items:
        flex-start:交叉轴的开始方向进行布局(默认值)
        flex-end:交叉轴的结束方向开始布局
        center:交叉轴居中对齐
        baseline:按照文字进行对齐
        stretch (默认值) : 拉伸 flex 项以填充整个容器（这里特别要注意：如果 flex 项有尺寸属性（min-width / max-width / width / min-height / max-height / height），那么首先应用这些尺寸属性。

(6)交叉轴多行时的对齐方式
    align-content:
        flex-start：多行在容器的开始位置排布
        flex-end：多行在容器的结束位置排布
        center：多行在容器的中间位置排布
        space-between：多行均匀分布；第一行分布在容器的开始位置，最后一行分布在容器的结束位置
        space-around: 多行均匀分布，并且每行的间距（包括离容器边缘间距）相同；
        stretch（默认值）：占满整个交叉轴。前提不设置高前提不设置高前提不设置高前提不设置高前提不设置高度

之后的这些属性全部是定义在flex项上的：
(7)order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
    可以设置负值

(8)flex-grow: 数字; 属性定义项目的放大比例，默认为0。此放大比例指的是如何去分配一行中剩余的空间.
例：如果一行剩余600，如果被你等分成6分，那么flex-grow：1占1分，flex-grow：3占3分；

如果一行中的剩余空间为0，那么设置此属性也是不生效的。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。(此属性不受宽度影响)

(9)flex-shrink: 数字; 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。(注意，前提是不换行)
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。(此属性不受宽度影响)

(10)flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）；此属性可以看做是优先级更高的width或者height属性;

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。(根据主轴的方向此属性表现为widht或者height)

flex-basis: auto(默认值) | length;

(11)flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

(12)align-self属性
align-self属性允许单个项目有与其他项目不一样的交叉轴对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性
    flex-start:交叉轴的开始方向进行布局(默认值)
    flex-end:交叉轴的结束方向开始布局
    center:交叉轴居中对齐
    baseline:按照文字进行对齐
    stretch (默认值) : 拉伸 flex 项以填充整个容器（这里特别要注意：如果 flex 项有尺寸属性（min-width / max-width / width / min-height / max-height / height），那么首先应用这些尺寸属性。



作业：模拟钢琴按键
</code></pre>
<p>13.媒体查询<br>    使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。</p>
<pre><code>@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

注意：如果使用媒体查询，必须保证页面内书写：
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;

1. 在style标签中定义媒体查询：
@media [not|only] mediatype and (media特性){

}
mediatype: （媒体类型） all 所有，screen智能设备（pc,平板,手机...）,print打印机 

media特性：可以看成是媒体查询的生效的条件
max-height:页面最大可见区域高度
min-height:页面最小可见区域高度
max-width:页面最大可见区域宽度
min-width:页面最小可见区域宽度

如果有多个个查询条件：
与的关系
@media screen and (max-width: 768px) and (max-width:1000px){
    .box{
        background: pink;
    }
}
或的关系
@media screen and (max-width: 768px), screen and (min-width: 900px) and (max-width:1000px){
    .box{
        background: pink;
    }
}

2. link标签使用媒体查询：
&lt;link rel="stylesheet" media="mediatype and (media 特性)" href="mystylesheet.css"&gt;

例：
&lt;link rel="stylesheet" media='screen and (min-width:769px) and (max-width:1992px)' type="text/css" href="css/pc.css"&gt;
&lt;link rel="stylesheet" media='screen and (max-width:768px)' type="text/css" href="css/phone.css"&gt;
</code></pre>
<p>14.过渡<br>    transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]<br>    (1)定义需要过渡的属性<br>    transition-property:width,height,background;<br>        all： (默认值)所有可以进行过渡的css属性<br>        none： 不指定过渡的css属性<br>        property： 指定要进行过渡的css属性<br>        如果提供多个属性值，以逗号进行分隔。<br>    (2)transition-duration:time[ ,time ]* ;<br>        time： 指定对象过渡的持续时间，单位:  s</p>
<pre><code>(3)transition-timing-function：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number)[ ,linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number) ]*

    默认值：ease

    linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)ease： 快-慢-快。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) 
    ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) 
    ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) 
    ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
    cubic-bezier(number, number, number, number)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

(4)transition-delay：time[ ,time ]* 
    定义延迟时间

(5)简写：
    如果所有属性都执行统一效果，缩写形式：
        transition:all 2s [linear [2s]];
    多个属性，多个时间，多个特效，多个延迟缩写形式：
        transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

作业1：实现图片放大功能
</code></pre>
<p>(15)动画<br>    两步：<br>        (1)定义动画<br>            @keyframes 动画名称{<br>                from {属性：值….}<br>                百分比 {属性：值….}<br>                to {属性：值….}<br>            }</p>
<pre><code>        @keyframes 动画名称{
            0% {属性：值....}
            百分比 {属性：值....}
            100% {属性：值....}
        }

    (2)使用动画
        1&gt;animation-name:'动画名称';

        2&gt;animation-duration:时间; (秒为单位s)

        3&gt;animation-timing-function:(参照transition-timing-function)

        4&gt;animation-delay:延迟时间;

        5&gt;animation-iteration-count:定义动画执行次数;
        关键词：infinite 表示无限次

        6&gt;animation-direction:动画执行方式;
        normal:默认值，执行完毕之后瞬间恢复最初始状态
        reverse:动画反向执行
        alternate:动画正向执行完毕，在反向执行动画；
        注意：设置此属性之后正向算一次动画反向算一次动画，所以如果设置动画执行1次，此属性值不生效；
        alternate-reverse:动画先反向执行，在正向执行；
        注意：设置此属性之后反向算一次动画正向算一次动画，所以如果设置动画执行1次，只会执行反向一次动画；

        7&gt;animation-fill-mode: 模式;
        forwards：在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
        backwards：动画将应用在 animation-delay 定义期间启动动画的第一次关键帧中定义的属性值；
        both:动画遵循 forwards 和 backwards 的规则；

        8&gt;.animation-play-state:
        paused      指定暂停动画    
        running     指定正在运行的动画

    (3)简写形式
        animation:[&lt;animation-name&gt; || &lt;animation-duration&gt; ||&lt;animation-timing-function&gt; || &lt;animation-delay&gt; ||&lt;animation-iteration-count&gt; || &lt;animation-direction&gt;] [,[&lt;animation-name&gt; || &lt;animation-duration&gt; || &lt;animationtiming-function&gt; || &lt;animation-delay&gt; || &lt;animationiteration-count&gt; || &lt;animation-direction&gt;] ]*


        注意：简写模式不包含：-webkit-animation-fill-mode和animation-play-state:
</code></pre>

                
            </div>
            <hr/>

            

    <div class="reprint" id="reprint-statement">
        
            <div class="reprint__author">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-user">
                        文章作者:
                    </i>
                </span>
                <span class="reprint-info">
                    <a href="/blog/about" rel="external nofollow noreferrer">Sen</a>
                </span>
            </div>
            <div class="reprint__type">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-link">
                        文章链接:
                    </i>
                </span>
                <span class="reprint-info">
                    <a href="https://sen-project.gitee.io/blog/blog/2021/10/14/css-es6-canvas/">https://sen-project.gitee.io/blog/blog/2021/10/14/css-es6-canvas/</a>
                </span>
            </div>
            <div class="reprint__notice">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-copyright">
                        版权声明:
                    </i>
                </span>
                <span class="reprint-info">
                    本博客所有文章除特別声明外，均采用
                    <a href="https://creativecommons.org/licenses/by/4.0/deed.zh" rel="external nofollow noreferrer" target="_blank">CC BY 4.0</a>
                    许可协议。转载请注明来源
                    <a href="/blog/about" target="_blank">Sen</a>
                    !
                </span>
            </div>
        
    </div>

    <script async defer>
      document.addEventListener("copy", function (e) {
        let toastHTML = '<span>复制成功，请遵循本文的转载规则</span><button class="btn-flat toast-action" onclick="navToReprintStatement()" style="font-size: smaller">查看</a>';
        M.toast({html: toastHTML})
      });

      function navToReprintStatement() {
        $("html, body").animate({scrollTop: $("#reprint-statement").offset().top - 80}, 800);
      }
    </script>



            <div class="tag_share" style="display: block;">
                <div class="post-meta__tag-list" style="display: inline-block;">
                    
                        <div class="article-tag">
                            
                                <a href="/blog/tags/HTML/">
                                    <span class="chip bg-color">HTML</span>
                                </a>
                            
                                <a href="/blog/tags/CSS/">
                                    <span class="chip bg-color">CSS</span>
                                </a>
                            
                                <a href="/blog/tags/ES6/">
                                    <span class="chip bg-color">ES6</span>
                                </a>
                            
                        </div>
                    
                </div>
                <div class="post_share" style="zoom: 80%; width: fit-content; display: inline-block; float: right; margin: -0.15rem 0;">
                    <link rel="stylesheet" type="text/css" href="/blog/libs/share/css/share.min.css">
<div id="article-share">

    
    <div class="social-share" data-sites="twitter,facebook,google,qq,qzone,wechat,weibo,douban,linkedin" data-wechat-qrcode-helper="<p>微信扫一扫即可分享！</p>"></div>
    <script src="/blog/libs/share/js/social-share.min.js"></script>
    

    

</div>

                </div>
            </div>
            
                <style>
    #reward {
        margin: 40px 0;
        text-align: center;
    }

    #reward .reward-link {
        font-size: 1.4rem;
        line-height: 38px;
    }

    #reward .btn-floating:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    #rewardModal {
        width: 320px;
        height: 350px;
    }

    #rewardModal .reward-title {
        margin: 15px auto;
        padding-bottom: 5px;
    }

    #rewardModal .modal-content {
        padding: 10px;
    }

    #rewardModal .close {
        position: absolute;
        right: 15px;
        top: 15px;
        color: rgba(0, 0, 0, 0.5);
        font-size: 1.3rem;
        line-height: 20px;
        cursor: pointer;
    }

    #rewardModal .close:hover {
        color: #ef5350;
        transform: scale(1.3);
        -moz-transform:scale(1.3);
        -webkit-transform:scale(1.3);
        -o-transform:scale(1.3);
    }

    #rewardModal .reward-tabs {
        margin: 0 auto;
        width: 210px;
    }

    .reward-tabs .tabs {
        height: 38px;
        margin: 10px auto;
        padding-left: 0;
    }

    .reward-content ul {
        padding-left: 0 !important;
    }

    .reward-tabs .tabs .tab {
        height: 38px;
        line-height: 38px;
    }

    .reward-tabs .tab a {
        color: #fff;
        background-color: #ccc;
    }

    .reward-tabs .tab a:hover {
        background-color: #ccc;
        color: #fff;
    }

    .reward-tabs .wechat-tab .active {
        color: #fff !important;
        background-color: #22AB38 !important;
    }

    .reward-tabs .alipay-tab .active {
        color: #fff !important;
        background-color: #019FE8 !important;
    }

    .reward-tabs .reward-img {
        width: 210px;
        height: 210px;
    }
</style>

<div id="reward">
    <a href="#rewardModal" class="reward-link modal-trigger btn-floating btn-medium waves-effect waves-light red">赏</a>

    <!-- Modal Structure -->
    <div id="rewardModal" class="modal">
        <div class="modal-content">
            <a class="close modal-close"><i class="fas fa-times"></i></a>
            <h4 class="reward-title">你的赏识是我前进的动力</h4>
            <div class="reward-content">
                <div class="reward-tabs">
                    <ul class="tabs row">
                        <li class="tab col s6 alipay-tab waves-effect waves-light"><a href="#alipay">支付宝</a></li>
                        <li class="tab col s6 wechat-tab waves-effect waves-light"><a href="#wechat">微 信</a></li>
                    </ul>
                    <div id="alipay">
                        <img src="/blog/medias/reward/alipay.jpg" class="reward-img" alt="支付宝打赏二维码">
                    </div>
                    <div id="wechat">
                        <img src="/blog/medias/reward/wechat.png" class="reward-img" alt="微信打赏二维码">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $('.tabs').tabs();
    });
</script>

            
        </div>
    </div>

    

    

    

    

    

    

    

    

<article id="prenext-posts" class="prev-next articles">
    <div class="row article-row">
        
        <div class="article col s12 m6" data-aos="fade-up" data-aos="fade-up">
            <div class="article-badge left-badge text-color">
                <i class="far fa-dot-circle"></i>&nbsp;本篇
            </div>
            <div class="card">
                <a href="/blog/2021/10/14/css-es6-canvas/">
                    <div class="card-image">
                        
                        <img src="http://r0juxgf4m.hb-bkt.clouddn.com/yazhi.png" class="responsive-img" alt="html5+css3+es6+canvas">
                        
                        <span class="card-title">html5+css3+es6+canvas</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            html5+css3+es6
                        
                    </div>
                    <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2021-10-14
                            </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/blog/categories/Markdown/" class="post-category">
                                    Markdown
                                </a>
                            
                            
                        </span>
                    </div>
                </div>

                
                <div class="card-action article-tags">
                    
                    <a href="/blog/tags/HTML/">
                        <span class="chip bg-color">HTML</span>
                    </a>
                    
                    <a href="/blog/tags/CSS/">
                        <span class="chip bg-color">CSS</span>
                    </a>
                    
                    <a href="/blog/tags/ES6/">
                        <span class="chip bg-color">ES6</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge right-badge text-color">
                下一篇&nbsp;<i class="fas fa-chevron-right"></i>
            </div>
            <div class="card">
                <a href="/blog/2021/10/02/first/">
                    <div class="card-image">
                        
                        
                        <img src="/blog/medias/featureimages/8.jpg" class="responsive-img" alt="First Bolg">
                        
                        <span class="card-title">First Bolg</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            
                        
                    </div>
                    <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2021-10-02
                            </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-user fa-fw"></i>
                            Sen
                            
                        </span>
                    </div>
                </div>
                
            </div>
        </div>
        
    </div>
</article>

</div>



<!-- 代码块功能依赖 -->
<script type="text/javascript" src="/blog/libs/codeBlock/codeBlockFuction.js"></script>

<!-- 代码语言 -->

<script type="text/javascript" src="/blog/libs/codeBlock/codeLang.js"></script>


<!-- 代码块复制 -->

<script type="text/javascript" src="/blog/libs/codeBlock/codeCopy.js"></script>


<!-- 代码块收缩 -->

<script type="text/javascript" src="/blog/libs/codeBlock/codeShrink.js"></script>


    

</main>




    <footer class="page-footer bg-color">
    
        <link rel="stylesheet" href="/blog/libs/aplayer/APlayer.min.css">
<style>
    .aplayer .aplayer-lrc p {
        
        display: none;
        
        font-size: 12px;
        font-weight: 700;
        line-height: 16px !important;
    }

    .aplayer .aplayer-lrc p.aplayer-lrc-current {
        
        display: none;
        
        font-size: 15px;
        color: #42b983;
    }

    
    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
        left: -66px !important;
    }

    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
        left: 0px !important;
    }

    
</style>
<div class="">
    
    <div class="row">
        <meting-js class="col l8 offset-l2 m10 offset-m1 s12"
                   server="tencent"
                   type="playlist"
                   id="1007453165"
                   fixed='true'
                   autoplay='false'
                   theme='#42b983'
                   loop='all'
                   order='random'
                   preload='auto'
                   volume='0.7'
                   list-folded='true'
        >
        </meting-js>
    </div>
</div>

<script src="/blog/libs/aplayer/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

    
    <div class="container row center-align" style="margin-bottom: 0px !important;">
        <div class="col s12 m8 l8 copy-right">
            Copyright&nbsp;&copy;
            
                <span id="year">2019-2021</span>
            
            <span id="year">2019</span>
            <a href="/blog/about" target="_blank">Sen</a>
            |&nbsp;Powered by&nbsp;<a href="https://hexo.io/" target="_blank">Hexo</a>
            |&nbsp;Theme&nbsp;<a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank">Matery</a>
            <br>
            
            &nbsp;<i class="fas fa-chart-area"></i>&nbsp;站点总字数:&nbsp;<span
                class="white-color">12k</span>&nbsp;字
            
            
            
            
            
            
            <span id="busuanzi_container_site_pv">
                |&nbsp;<i class="far fa-eye"></i>&nbsp;总访问量:&nbsp;<span id="busuanzi_value_site_pv"
                    class="white-color"></span>&nbsp;次
            </span>
            
            
            <span id="busuanzi_container_site_uv">
                |&nbsp;<i class="fas fa-users"></i>&nbsp;总访问人数:&nbsp;<span id="busuanzi_value_site_uv"
                    class="white-color"></span>&nbsp;人
            </span>
            
            <br>
            
            <br>
            
        </div>
        <div class="col s12 m4 l4 social-link social-statis">
    <a href="https://gitee.com/sen-project/blog" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>



    <a href="mailto:2079224061@qq.com" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50">
        <i class="fas fa-envelope-open"></i>
    </a>







    <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=2079224061" class="tooltipped" target="_blank" data-tooltip="QQ联系我: 2079224061" data-position="top" data-delay="50">
        <i class="fab fa-qq"></i>
    </a>







    <a href="/blog/atom.xml" class="tooltipped" target="_blank" data-tooltip="RSS 订阅" data-position="top" data-delay="50">
        <i class="fas fa-rss"></i>
    </a>

</div>
    </div>
</footer>

<div class="progress-bar"></div>


    <!-- 搜索遮罩框 -->
<div id="searchModal" class="modal">
    <div class="modal-content">
        <div class="search-header">
            <span class="title"><i class="fas fa-search"></i>&nbsp;&nbsp;搜索</span>
            <input type="search" id="searchInput" name="s" placeholder="请输入搜索的关键字"
                   class="search-input">
        </div>
        <div id="searchResult"></div>
    </div>
</div>

<script type="text/javascript">
$(function () {
    var searchFunc = function (path, search_id, content_id) {
        'use strict';
        $.ajax({
            url: path,
            dataType: "xml",
            success: function (xmlResponse) {
                // get the contents from search data
                var datas = $("entry", xmlResponse).map(function () {
                    return {
                        title: $("title", this).text(),
                        content: $("content", this).text(),
                        url: $("url", this).text()
                    };
                }).get();
                var $input = document.getElementById(search_id);
                var $resultContent = document.getElementById(content_id);
                $input.addEventListener('input', function () {
                    var str = '<ul class=\"search-result-list\">';
                    var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
                    $resultContent.innerHTML = "";
                    if (this.value.trim().length <= 0) {
                        return;
                    }
                    // perform local searching
                    datas.forEach(function (data) {
                        var isMatch = true;
                        var data_title = data.title.trim().toLowerCase();
                        var data_content = data.content.trim().replace(/<[^>]+>/g, "").toLowerCase();
                        var data_url = data.url;
                        data_url = data_url.indexOf('/') === 0 ? data.url : '/' + data_url;
                        var index_title = -1;
                        var index_content = -1;
                        var first_occur = -1;
                        // only match artiles with not empty titles and contents
                        if (data_title !== '' && data_content !== '') {
                            keywords.forEach(function (keyword, i) {
                                index_title = data_title.indexOf(keyword);
                                index_content = data_content.indexOf(keyword);
                                if (index_title < 0 && index_content < 0) {
                                    isMatch = false;
                                } else {
                                    if (index_content < 0) {
                                        index_content = 0;
                                    }
                                    if (i === 0) {
                                        first_occur = index_content;
                                    }
                                }
                            });
                        }
                        // show search results
                        if (isMatch) {
                            str += "<li><a href='" + data_url + "' class='search-result-title'>" + data_title + "</a>";
                            var content = data.content.trim().replace(/<[^>]+>/g, "");
                            if (first_occur >= 0) {
                                // cut out 100 characters
                                var start = first_occur - 20;
                                var end = first_occur + 80;
                                if (start < 0) {
                                    start = 0;
                                }
                                if (start === 0) {
                                    end = 100;
                                }
                                if (end > content.length) {
                                    end = content.length;
                                }
                                var match_content = content.substr(start, end);
                                // highlight all keywords
                                keywords.forEach(function (keyword) {
                                    var regS = new RegExp(keyword, "gi");
                                    match_content = match_content.replace(regS, "<em class=\"search-keyword\">" + keyword + "</em>");
                                });

                                str += "<p class=\"search-result\">" + match_content + "...</p>"
                            }
                            str += "</li>";
                        }
                    });
                    str += "</ul>";
                    $resultContent.innerHTML = str;
                });
            }
        });
    };

    searchFunc('/blog/search.xml', 'searchInput', 'searchResult');
});
</script>

    <!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fas fa-arrow-up"></i>
    </a>
</div>


    <script src="/blog/libs/materialize/materialize.min.js"></script>
    <script src="/blog/libs/masonry/masonry.pkgd.min.js"></script>
    <script src="/blog/libs/aos/aos.js"></script>
    <script src="/blog/libs/scrollprogress/scrollProgress.min.js"></script>
    <script src="/blog/libs/lightGallery/js/lightgallery-all.min.js"></script>
    <script src="/blog/js/matery.js"></script>

    <!-- Baidu Analytics -->

    <!-- Baidu Push -->

<script>
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        } else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

    
    <script src="/blog/libs/others/clicklove.js" async="async"></script>
    
    
    <script async src="/blog/libs/others/busuanzi.pure.mini.js"></script>
    

    

    

	
    

    

    

    
    <script src="/blog/libs/instantpage/instantpage.js" type="module"></script>
    

<script src="/blog/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"model":{"jsonPath":"/blog/live2dw/assets/shizuku.model.json"},"display":{"position":"right","width":200,"height":350},"mobile":{"show":false},"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/","tagMode":false});</script></body>

</html>
<!--动态线条背景-->
<script type="text/javascript"
color="27,27,47" opacity='0.8' zIndex="-2" count="300" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
</script>
